<template>
  <div class="pf-flow-todolist pf-bgwhite">
    <el-table :data="datas">
      <el-table-column
        label="流程ID"
        prop="processDefinitionId"
        min-width="100px"
        show-overflow-tooltip
      />
      <el-table-column
        label="流程实例ID"
        prop="processInstId"
        min-width="100px"
        show-overflow-tooltip
      />
      <el-table-column
        label="流程名称"
        prop="processName"
        min-width="100px"
        show-overflow-tooltip
      />
      <el-table-column label="发起人" prop="starter" min-width="100px" show-overflow-tooltip />
      <el-table-column label="创建时间" prop="createTime" min-width="100px" show-overflow-tooltip />
      <el-table-column
        label="任务ID"
        prop="taskDefinitionKey"
        min-width="100px"
        show-overflow-tooltip
      />
      <el-table-column
        label="任务实例ID"
        prop="taskInsId"
        min-width="100px"
        show-overflow-tooltip
      />
      <el-table-column
        label="业务表单key"
        prop="taskFormKey"
        min-width="100px"
        show-overflow-tooltip
      />
      <el-table-column label="任务名称" prop="taskName" min-width="100px" show-overflow-tooltip />
      <el-table-column label="操作" width="100px">
        <template v-slot="{ row }">
          <el-button size="mini" link type="primary" @click="handleClick('detail', row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="详情" width="90%" top="5vh" destroy-on-close v-model="dialogVis">
      <FlowTodo @commitDone="commitDone" :todo-task="currentTodoTask"></FlowTodo>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, Ref, ref } from 'vue';
import FlowTodo from '@/views/page-config/flow/todos/FlowTodo.vue';
import { ResponseCodeEnum, useHttpClient } from 'pf-component';
import { camundaApi } from '@/constants/api/camunda-api';
import { useNotice } from '@/components/element-plus/notice';

export default defineComponent({
  name: 'FlowTodoList',
  components: { FlowTodo },
  setup() {
    const datas: Ref = ref([]);
    const initDatas = () => {
      const loading = useNotice().loading;
      loading.open();
      useHttpClient()
        .general(camundaApi.processTaskApi.queryTodo)
        .then(res => {
          if (ResponseCodeEnum.SUCCESS === res.code) {
            datas.value = res.data;
          } else {
            datas.value = [];
          }
        })
        .finally(() => {
          loading.close();
        });
    };
    const dialogVis = ref(false);
    const currentTodoTask: Ref = ref(null);

    const handleClick = (cmd: string, data: any) => {
      if (cmd === 'detail') {
        currentTodoTask.value = data;
        dialogVis.value = true;
      }
    };

    const commitDone = (val: boolean) => {
      if (val) {
        dialogVis.value = false;
        initDatas();
      }
    };
    onMounted(() => {
      initDatas();
    });
    return {
      datas,
      handleClick,
      dialogVis,
      currentTodoTask,
      commitDone
    };
  }
});
</script>
<style scoped lang="scss">
.#{$prefix} {
  &-flow-todolist {
    //margin: 10px;
    //padding: 0;
    //overflow-y: auto;
    height: 100%;
  }
}
</style>
